<template>
  <div class="component_container">
    <!-- 显示在外面的按钮 -->
    <template v-for="(item, i) in singleButtonList" :key="i">
      <slot v-if="item.slot" :name="item.slot"></slot>
      <el-button
        v-else
        :type="item.type || 'primary'"
        link
        size="mini"
        @click="onClick(item)"
      >
        {{ item.text }}
      </el-button>
    </template>
    <!-- 折叠的部分 -->
    <el-dropdown
      v-if="foldButtonList.length"
      :hide-on-click="true"
      @command="handleCommand"
    >
      <el-button type="primary" plain link size="mini" class="el-dropdown-link">
        更多<ArrowDown class="dropdown_arrow_icon" />
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-for="(item, i) in foldButtonList" :key="i">
            <el-dropdown-item :command="item.text">
              {{ item.text }}
            </el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "tableButtonGroup",
  props: {
    // 按钮配置数组
    buttonList: {
      type: Array,
      require: true,
      default: () => {
        return [
          /*
          {
            // 按钮文案
            text: '查看',
            // 点击处理的方法（回传两个参数: row, rowIndex）
            onClick: methodName,
            // 按钮标识，作为判断的标识（可选，需要用到就加）
            code: 'view',
            // el-button 组件 type 属性（可选，不写默认为 primary）
            type: 'primary',
            // 是否渲染（可选：相当于v-if，不写默认显示）
            visible: true,
            // 权限编码（可选）
            permission: this.$permissions.archives_profile_view,
            // 插槽（可选）
            slot: 'xxx'
          },
          */
        ];
      },
    },
    // 显示在外面按钮的个数（其他的折叠）
    showCount: {
      type: Number,
      default: 1,
    },
    // 需要操作的数据
    row: {
      type: Object,
      require: true,
      default: () => {
        return {};
      },
    },
    rowIndex: {
      type: Number,
    },
  },
  // emits: ['click'],
  data() {
    return {
      // 显示在外面的按钮
      singleButtonList: [],
      // 折叠的按钮
      foldButtonList: [],
    };
  },
  watch: {
    buttonList: {
      handler(newVal) {
        if (!newVal || !newVal.length) return;
        // 过滤掉不显示或者没有权限的
        let list = newVal.filter((item) => this.checkIsShow(item));
        let singleButtonList = [];
        let foldButtonList = [];
        if (list.length > this.showCount) {
          singleButtonList = list.slice(0, this.showCount);
          foldButtonList = list.slice(this.showCount);
        } else {
          singleButtonList = list;
        }
        this.singleButtonList = singleButtonList;
        this.foldButtonList = foldButtonList;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 检查是否显示
    checkIsShow(item) {
      if (item.permission && !this.$hasPermission(item.permission)) {
        return false;
      }
      if (item.hasOwnProperty("visible") && !item.visible) {
        return false;
      }
      return true;
    },

    // 单个按钮点击
    onClick(item) {
      // this.$emit('click', item)
      if (typeof item.onClick === "function") {
        item.onClick(this.row, this.rowIndex);
      } else {
        console.error("onClick 属性应该为 function 类型");
      }
    },

    // 下拉选项按钮点击
    handleCommand(command) {
      let item = this.foldButtonList.find((cell) => cell.text === command);
      // this.$emit('click', item)
      if (item && typeof item.onClick === "function") {
        item.onClick(this.row, this.rowIndex);
      } else {
        console.error("onClick 属性应该为 function 类型");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.component_container {
  height: 100%;
  display: inline-flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  margin-left: 8px;
}

.dropdown_arrow_icon {
  width: 12px;
  height: 12px;
  color: #409eff;
  margin-left: 5px;
}
</style>
